<template>
  <div class="app-container" style="background:rgb(240, 242, 245);width:100%;">
    <div class="filter-container" style="background:white;width:100%;">
      <el-row :gutter="32" style="width:100%;height:800px;padding:10px 30px 0;margin-bottom:3px;">
        <el-col :xs="24" :sm="24" :lg="8" style="width:20%;height:800px;">
          <tower_graph></tower_graph>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8" style="width:70%;height:800px;">
          <el-row :gutter="32" style="width:100%;height:400px;padding:10px 30px 0;margin-bottom:3px;">
            <el-col :xs="24" :sm="24" :lg="8" style="width:100%;height:400px;">
              <div>
                <dam_gauge></dam_gauge>
              </div>
            </el-col>
         </el-row>
          <el-row :gutter="32" style="width:100%;height:400px;padding:10px 30px 0;margin-bottom:3px;">
           <el-col :xs="24" :sm="24" :lg="8" style="width:100%;height:400px;">
             <div>
               <!--<acoustic_emission></acoustic_emission>-->
              </div>
           </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { get, get as userType, del, dels } from '@/api/sys/connSysAuthApi'
  import { parseTime } from '@/utils'

  import { req } from '@/api/base/BaseApi'
  import acoustic_emission from './acoustic_emission'
  import dam from './dam'
  import tower_graph from './graph'
  import Dam_gauge from './dam_gauge'
  let userTypes = []
  export default {
    components: {
      Dam_gauge,
      dam,
      acoustic_emission,
      tower_graph
    },
    data() {
      return {}
    },
    filters: {
      userTypeFilter(type) {
        let typeText = type
        userTypes.forEach((val) => {
          if (type === val.value) {
            typeText = val.name
          }
        })
        return typeText
      },
      menuFilter(ids) {
        let length = 0
        if (ids) {
          length = ids.length
        }
        return length
      },
      dateTimeFilter(time) {
        return parseTime(time)
      }
    },
    created() {
      this.page()
      // this.getUserType()
    },
    methods: {
      page() {
        this.listLoading = true
        // console.log(this.listQuery)
        // req('/api/sys/auth/riskinfo/pages', 'put', this.listQuery).then(response => {
        //   this.list = response.data
        //   this.total = response.total
        //   this.listLoading = false
        // }).catch(() => console.log('page request error'))
      },
      get(id) {
        this.listLoading = true
        get(this.module, id).then(res => {
          this.info = res.data
          this.listLoading = false
        })
      },
      getUserType() {
        userType(this.module + '/userType').then(response => {
          if (response.data) {
            userTypes = response.data
          }
        })
      },
      handleDelete(id) {
        this.listLoading = true
        del(this.module, id).then(res => {
          this.page()
        }).catch(e => {
          this.listLoading = false
        })
      },
      handleDeletes() {
        this.listLoading = true
        dels(this.module, this.ids).then(res => {
          console.log(res)
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listLoading = true
        if (this.listQuery.keyword === undefined) {
          this.listQuery.keyword = ''
        }
        req('/api/sys/auth/riskinfo/sortCategoryInfo', 'put', this.listQuery.keyword).then(response => {
          this.list = response.data
          this.total = response.total
          this.listLoading = false
        }).catch(() => console.log('page request error'))
        //  this.listQuery.page = 1
        // this.page()
      },
      handleSizeChange(val) {
        this.listQuery.size = val
        this.page()
      },
      handleCurrentChange(val) {
        console.log('handleCurrentChange')
        this.listQuery.page = val
        this.page()
      }
    }
  }
</script>
<style scoped>
  .demo-table-expand {
    font-size: 20px;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100px;
  }
</style>

